<template>
   <div>
      <search></search>
      <view class="cate">
         <scroll-view class="cate-left" scroll-y>
            <block v-for="(item,index) in leftData" :key="index">
               <view class="leftData" :class="{active: index === tabIndex}" @tap="changeActive(index)">{{item.cat_name}}</view>
            </block>
         </scroll-view>
         <scroll-view class="cate-right" scroll-y scroll-top>
            <view class="floor">
               <block v-for="(subItem,subIndex) in righrData.children" :key="subIndex">
               <view class="floor-head">{{subItem.cat_name}}</view>
               <view class="floor-content">
                  <view class="floor-content-item" v-for="(lastItem,lastIndex) in subItem.children" :key="lastIndex" @tap="gotoList(lastItem.cat_name)">
                     <image :src="lastItem.cat_icon"></image>
                     <view>{{lastItem.cat_name}}</view>
                  </view>
               </view>
               </block>
            </view>
         </scroll-view>
      </view>
   </div>
</template>
<script>
import search from '@/components/search'
import request from '@/utils/request'
export default {
  components: {
     search
  },
  data () {
     return {
        leftData:[],
        tabIndex:0,
        righrData:[]
     }
  },
  created () {
    request('https://www.zhengzhicheng.cn/api/public/v1/categories').then(res => {
      //  console.log(res)
       this.leftData = res.data.message
       this.righrData = this.leftData[0]
        console.log(this.righrData)
    })
  },
  methods: {
     changeActive(index){
        this.tabIndex = index
        // 如果数据多，可能在切换的时候是滚动到底部的
      // 数据少,肯定是在顶部,所以先把数据重置为空后再赋值
        this.righrData = []
        setTimeout(() => {
           this.righrData = this.leftData[index]
        }, 0);
     },
     gotoList(name){
        wx.navigateTo({
         url: '/pages/goods_list/main'+'?keyword='+name
         })
     }
  }
}
</script>

<style lang="scss" scoped>
.cate {
   // background-color:pink;
   position: fixed;
   left: 0;
   top:100rpx;
   right: 0;
   bottom: 0;
   display: flex;
   // 左侧tab栏
   .cate-left{
      background-color: #f4f4f4;
      width: 200rpx;
      .leftData {
         height: 100rpx;
         line-height: 100rpx;
         font-size: 28rpx;
         text-align: center;
         &.active {
            position: relative;
            background-color: #fff;
            color: red;
            &::after{
               content: "";
               position: absolute;
               left:0;
               width: 10rpx;
               top: 15rpx;
               bottom: 15rpx;
               background-color: red;
            }
         }
      }
   }
   .cate-right{
      // background-color: blue;
      flex: 1;
      .floor {
         &-head{
            height: 100rpx;
            font-size: 32rpx;
            text-align: center;
            line-height: 100rpx;
            &::before,&::after {
               content: "/";
               color: #ccc;
               padding:0 20rpx;
            }
         }
         &-content{
            display: flex;
            flex-wrap: wrap;
            &-item{
               width: 33.33%;
               text-align: center;
               margin-top:20rpx; 
               image{
                  width: 100rpx;
                  height: 65rpx;
               }
               view {
                  font-size: 24rpx;
                  margin-top:10rpx; 
               }
            }
         }
      }
   }
}

</style>


